<template>
    <div class="page">
        <div class="toolbar">
            <el-button size="small" plain type="primary" @click="addImage()">添加照片</el-button>
            <selector :data="{radius:'设置圆角', del:'删除',angle:'旋转'}" v-model="mode" :clearable="false"
                      :enumCount="8" @change="m_change"></selector>
            <el-button size="small" type="primary" @click="savePhoto">保存</el-button>
        </div>
        <div class="album-page"
             :style="{width: standard_w +'px',height:standard_h+'px',backgroundImage:'url(' + info.backgroundImage.fullUrl + ')'}">

            <vue-draggable-resizable class="img1" :class="'rect_' + mode" v-for="(item,index) in info.photos"
                                     :key="item.id"
                                     :x="item.location.x" :y="item.location.y"
                                     :w="item.size.width" :h="item.size.height"
                                     :parent="true" :drag-cancel="'.btn > *'"
                                     :style="{borderRadius:item.borderRadius+'px',transform:'rotate(' + item.angle + 'deg)'}"

                                     @activated="onActivated(item)"
                                     @dragging="(x,y)=>onDrag(index,x,y)"
                                     @resizing="(x,y,w,h)=>onResize(index,x,y,w,h)"
            >
                <div class="bg" :style="{borderRadius:item.borderRadius+'px'}"></div>
                <div class="btn" v-if="mode=='radius'">
                    <my-number-input v-model="item.borderRadius" :min="0" :max="99" style="width:150px;"
                                     @change="v=>borderRadius_change(item,v)"></my-number-input>
                </div>
                <div class="btn" v-if="mode=='del'">
                    <el-button @click="del_click(index)">删除</el-button>
                </div>
                <div class="btn" v-if="mode=='angle'">
                    <my-number-input v-model="item.angle" :min="-90" :max="90" :step="0.2" style="width:150px;"
                                     @change="v=>angle_change(item,v)"></my-number-input>
                </div>
            </vue-draggable-resizable>
        </div>
    </div>
</template>
<script>
    import VueDraggableResizable from 'vue-draggable-resizable'
    // optionally import default styles
    import 'vue-draggable-resizable/dist/VueDraggableResizable.css'


    export default {
        components: {VueDraggableResizable},
        name: "albumPage",
        props: {
            data: {
                type: Object, default() {
                    return {}
                }
            },
            size: {
                type: Object, default() {
                    return {}
                }
            },
            albumId: {
                type: String, default() {
                    return ""
                }
            }
        },
        data() {
            return {
                info: {backgroundImage: {}}, //显示用的数据。
                mode: 'radius',
                radius: 0,
                active: {},
                standard_h: 550,
                standard_w: 700,
            };
        },
        methods: {
            //https://mauricius.github.io/vue-draggable-resizable/?path=/story/styling--style-dragging
            onDrag(index, x, y) {
                this.info.photos[index].location.x = x;
                this.info.photos[index].location.y = y;

                console.log(this.info.photos[index].location.x);
            },
            savePhoto() {
                var page = JSON.clone(this.info);
                page.photos = page.photos.map(it => this.procToDbData(it));

                this.$http.post("/album/savePage", {albumId: this.albumId, page: page}).then(res => {
                    this.$emit("change");
                })
            },
            borderRadius_change(item, v) {
                item.borderRadius = v;
            },
            angle_change(item, v) {
                item.angle = v;
            },
            onActivated(item) {
                this.active = item;
            },
            del_click(index) {
                this.info.photos.removeAt(index);
            },
            m_change(v) {
                console.log(v);
            },
            addImage() {
                var item = this.getDefData();
                item.id = "_" + jv.random();
                this.procToViewData(item);
                this.info.photos.push(item)
            },
            onResize(index, x, y, w, h) {
                this.info.photos[index].location.x = x;
                this.info.photos[index].location.y = y;
                this.info.photos[index].size.width = w;
                this.info.photos[index].size.height = h;
            },
            onResizeStop(item, x, y, w, h) {

            },
            getDefData() {
                return Object.assign({}, {
                    size: {width: 300, height: 300},
                    location: {x: 0, y: 0},
                    angle: 0,
                    borderRadius: 0
                });
            },
            procToViewData(it) {
                var w = this.standard_w;
                var h = this.standard_h;

                it.size.width = Math.max(50, (w * it.size.width / 1000).ToRound());
                it.size.height = Math.max(50, (h * it.size.height / 1000).ToRound());
                it.location.x = (w * it.location.x / 1000).ToRound();
                it.location.y = (h * it.location.y / 1000).ToRound();

                it.borderRadius = jv.asInt(w * it.borderRadius / 1000);
                return it;
            },
            procToDbData(it) {
                var w = this.standard_w;
                var h = this.standard_h;

                it.size.width = jv.asInt(1000 * it.size.width / w);
                it.size.height = jv.asInt(1000 * it.size.height / h);
                it.location.x = jv.asInt(1000 * it.location.x / w);
                it.location.y = jv.asInt(1000 * it.location.y / h);
                it.borderRadius = jv.asInt(1000 * it.borderRadius / w);
                return it;
            },
            setData(v) {
                v = v || this.data;

                this.info = Object.assign({photos: [], backgroundImage: {}}, JSON.clone(v));

                this.info.photos = this.info.photos.map(photo => {
                    var it = Object.assign(this.getDefData(), photo);

                    return this.procToViewData(it);
                });
            }
        },
        watch: {
            data: {
                deep: true, handler(v) {
                    if (jv.dataEquals(v, this.info)) {
                        return;
                    }
                    this.setData(v);
                }
            }
        },
        created() {
            //竖版： 最高按800算。
            this.standard_h = screen.availHeight - 200;
            this.standard_w = this.standard_h * (this.size.width / this.size.height).ToRound();

            console.log("h:" + this.standard_h + ",w:" + this.standard_w);
            this.setData();
        }
    }
</script>
<style scoped>
    .page {
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .toolbar {
        display: flex;
        background-color: #f6f5f5;
        border: solid 1px lightgray;
        margin-bottom: 6px;
        padding: 6px;
        flex-direction: column;

        height: 200px;
        width: 120px;
        margin-right: 10px;
    }

    .toolbar > .enum {
        margin: auto 20px;
        display: flex;
        flex: 1;
    }

    .enum >>> .el-radio-group {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .album-page {
        border: solid 1px gray;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        box-shadow: 0 0 10px -2px grey;
        border-radius: 4px;
    }

    .bg {
        content: " ";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: darkorange;
        opacity: 0.5;
    }

    .btn {
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img1 {
        transform-origin: left top;
    }


</style>
